<template>
	<view>
		<view class="list">
			<view class="item" v-for="(i,j) in list" :key="j">
				<view class="item-top flex_start_center">
					<view class="item-top-right flex_column_between_start">
						<text class="title nowrap-ellipsis">{{i.name||'暂无'}}</text>
						<text class="buyNum">需求数量：<text class="content">{{i.buyNum}}</text></text>
						<text>截止日期：<text class="content">{{i.endTime==null?'长期采购':i.endTime.substring(0, 10)}}</text></text>
					</view>

				</view>
				<view class="actionButton flex_between_center">
					<view class="left" @tap="tapDel(i)">
						删除
					</view>
					<view class="right" @tap.prevent="addHandle(i)">
						编辑
					</view>
				</view>
			</view>
			<template v-if="firstLoad">
				<view class="empty flex_center" v-if="!list.length">
					<u-empty mode="car" iconSize="120rpx" textSize="28rpx" text="暂时没有采购"
						icon="https://file.casugn.com/storecompcard/temp/空页面@2x(4)_1681113630028.png">
					</u-empty>
				</view>
				<u-loadmore :status="status" marginTop="40rpx" loading-text="努力加载中" loadmore-text="上拉加载更多"
					nomore-text="已全部加载" fontSize="30" line v-if="list.length>4" />
			</template>
		</view>
		<u-modal :show="showDel" ref="uModal" :asyncClose="true" title="确定删除？" confirmColor="#F53F3F" confirmText="删除" showCancelButton @cancel="cancelDel" @confirm="confirmDel" ></u-modal>

		<cus-add-btn :safeAreaInsetBottom="false" @click="addHandle('')"></cus-add-btn>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				firstLoad: false,
				info: {
					name: '王伟',
					company: '山东日照一品商业有限公司山东日照一品商业有限公司'
				},
				list: [],
				needId: '',
				queryParam: {
					pageNo: 1,
					pageSize: 10,
				},
				status: 'nomore',
				showDel: false,
				row: {}, //待操作对象
			}
		},
		computed: {
			...mapGetters({
				supplierId: 'getSupplierId',
			}),
		},
		onShow() {
			let openId = uni.getStorageSync('openId')
			this.openId = openId.openid
			this.getList('reset')
		},
		onPullDownRefresh() {
			this.getList('reset')
		},
		//加载更多
		onReachBottom() {
			this.getList()
		},
		methods: {
			cancelDel(){
				this.row = {}
				this.showDel = false
			},
			//确认删除
			confirmDel() {
				this.$api.deleteMyBuyListsById(this.row.id).then(res => {
					this.getList('reset')
				}).finally(() => {
					this.showDel = false
				})
			},
			//删除弹窗
			tapDel(item) {
				uni.$u.throttle(() => {
					this.showDel = true
					this.row = item
				}, 500)
			},
			// 找采购列表数据
			getList(reset) {
				this.queryParam.pageNo = reset ? 1 : ++this.queryParam.pageNo
				let params = {
					...this.queryParam,
					openId: this.openId
				}
				this.status = 'loading'
				this.$api.queryMyCouponLists(params).then(res => {
					if (res.success) {
						let arr = res.result.records
						this.list = reset ? arr : this.list.concat(arr)
						setTimeout(() => {
							this.status = res.result.total === this.list.length ? 'nomore' :
								'loadmore'
						}, 400)
					} else {
						this.$showToast(res.message)
					}
					this.firstLoad = true
				})
			},
			addHandle(item) {
				uni.$u.throttle(() => {
					let editId = item ? ('?editId=' + item.id || '') : ''
					uni.navigateTo({
						url: '/pagesBusiness/purchase/purchase' + editId
					})
				}, 500);
			
			},
			back() {
				uni.switchTab({
					url: '/pages/user/user'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #F7F8FA;
	}

	view {
		box-sizing: border-box;
	}

	::v-deep {
		.uicon-edit-pen {
			top: 1px !important;
		}
	}

	.list {
		padding: 32rpx;
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));


		.item {
			padding: 24rpx 32rpx;
			border-radius: 8rpx;
			background-color: #fff;
			margin-bottom: 24rpx;

			.item-top {
				border-bottom: 1px solid #E5E6EB;
			}

			.item-top-right {
				font-size: 28rpx;
				color: #86909C;
				line-height: 34rpx;
				padding-bottom: 24rpx;
				flex: 1;

				.title {
					max-width: 500rpx;
					font-size: 32rpx;
					font-weight: 600;
					color: #1D2129;
					line-height: 44rpx;
				}
				.buyNum{
					margin: 24rpx 0 16rpx;
				}
				.content{
					color: #1D2129;
				}

			}

			.actionButton {
				padding-top: 24rpx;

				.left,
				.right {
					height: 64rpx;
					line-height: 64rpx;
					width: 50%;
					font-size: 28rpx;
					text-align: center;

					&:active {
						opacity: .8;
					}
				}

				.left {
					color: #F53F3F;
				}

				.right {
					color: #276AEE;
				}
			}
		}

		.empty {
			padding-top: 186rpx;
		}
	}
</style>